<template>
    <div class="kefu">
    <h2>客服聊天区域</h2>
    <div class="box">
      <div class="lishi">
          <p>历史记录</p>
          <div ref="jieshou">
              <img :src="imgs" alt="">
          </div>
      </div>
      <div class="chatbox">
        <div class="chat-left">
          <div class="upFile">
            <input type="file" class="file" name="file" accept="image/*" @change="handleuploadFile($event)"/>              
            <input type="text" class="fileInput" v-model="chatInput" @change="handleChat2" />
          </div>
          <textarea name="" class="textarea" cols="40" rows="2" v-model="kefuInput" @change="handleChat2"></textarea>
        </div>
        <input type="button" value="发送" @click="send2"/>
      </div>
      
    </div>
    
    </div>
    
</template>

<script>
// import axios from "axios";
import store from '../../store'
import './chat.scss'
import mqtt from 'mqtt'
var client
const options = {
    connectTimeout: 40000,
    clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
    username: "",
    password: "",
    clean: true
}
export default {  
  data() {
    return {
      file: '',
      kefuInput: '',
      chatInput: '上传图片',
      imgs: ''
    };
  },
  mounted () {
    // this.initQuotesWs()
    // this.initkefuWs()
  },
  methods: {
    handleuploadFile (evt, flg) {
      let files = Array.prototype.slice.call(evt.target.files)
      let vm = this
      files.forEach(function (file, i) {
        
        let reader = new FileReader()
        reader.onload = function (fv) {
          let data = fv.target.result
          console.log(data)
          // let image = data.split(',')[1]
          vm.chatInput = data
          // console.log('base64', image)
        }
        reader.readAsDataURL(file)
      })
    },
    // 发送WebSocket请求
    wsSend (parameter) {
      // console.log(parameter)
      parameter = parameter
      client.publish(`chating/customer/${store.getters.uid}`, parameter)
    },
    sendMessage () {},
   
    handleChat2 () {},
    
    send2 () {},
   
    // 客服接收信息
    initkefuWs () {
        client = mqtt.connect(`ws://192.168.0.129:8083/mqtt`, options)
        client.on('connect', (e) => {
            console.log('客服聊天连接成功:')
            this.wsOnOpen()
            client.subscribe(`chating/customer/${store.getters.uid}` , (error) => {
              if (!error) {
                console.log('客服聊天订阅成功')
              } else {
                console.log('客服聊天订阅失败')
              }
            })
        })
        // 接收消息处理
        client.on('message', (topic, message) => {
            console.log('接收消息', message)
            this.wsOnMessage(message.toString())
        })
        // 断开发起重连
        client.on('reconnect', (error) => {
            console.log('客户聊天正在重连:', error)
        })
        // 链接异常处理
        client.on('error', (error) => {
            console.log('客户聊天连接失败:', error)
        })
        client.on('close', (error) => {
            console.log('客户聊天连接关闭:', error)
        })
    },
    // 当行情ws打开时回调
    wsOnOpen (e) {
      // console.log(e);
      // 连接上后,刷新标记复位
    },
    // 当行情wsj接收时的回调
    wsOnMessage (data) {
      console.log('消息接收', data)
      this.imgs = data
    }
  }
}
</script>

<style scoped>
.kefu{
  margin-left:30px
}

</style>